<template>
	<div>
		<div class="tou">

				<i class="biao"><span class="iconfont icon-sousuo"></span></i>
				<input @input="change" type="text" v-model.trim="keyWord" id="sou" placeholder="RCR进口水晶 全场2折起">
				<button @click="black">取消</button>
			<div v-show="keyWord">
				<ul v-show="keyWord" id="ding">
					<li v-for="item in keylist" :key="item.name" @click="handlechangpage(item)">{{item.name}}</li>
				</ul>
			</div>
		</div>

		<div v-show="!keyWord" id="fa"><p>搜索发现</p><i></i></div>
		<div v-show="!keyWord" class="xiang">
			<p >AMQ</p>
			<p >卫衣</p>
			<p >FENDI</p>
			<p>阔腿裤</p>
			<p>WDLS</p>
			<p >连衣裙</p>
		</div>
		<div v-show="!keyWord" id="li">
			<p>历史搜索</p>
			<i class="shi"><span class="iconfont icon-chahao"></span></i>
		</div>
		<div class="xian">
			<p v-for="(item,index) in keyarr" :key="index">{{item}}</p>
		</div>
	</div>

</template>
<script>
	import axios from "axios"

	let timer = null
	let hisKey = []
	export default{
		data(){
		    return {
		      keyWord:"",
          keylist:null,
          keyarr:JSON.parse(localStorage.getItem("hisKey"))
		    }
		},
		methods:{
			// 取消按钮
			black(){
				this.$router.back()
			},

			handlechangpage(item){

				this.$router.push({
          path:"search/plist"
        })
				hisKey.push(item.name)
				localStorage.setItem("hisKey",JSON.stringify(hisKey))

			},
			change(){
				if(this.keyWord.trim()){
					clearTimeout(timer)
					timer = setTimeout(()=>{
						axios.get("http://www.mei.com/appapi/search/searchSuggest/v3?text="+this.keyWord).then(res=>{
							this.keylist = res.data.result
						})

					},300)
				}
			}

		}
	}

</script>

<style scoped>
	.tou{
		width: 3.75rem;
		height: 0.44rem;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}
	.biao{
		width: 0.34rem;
		height: 0.32rem;
		background: #f5f5f5;
		text-align: center;
		line-height: 0.32rem;
	}
	#sou{
		width: 2.43rem;
		height: 0.32rem;
		background: #f5f5f5;
		border-radius: 0.05rem;
		border: 0;
	}
	.tou button{
		width: 0.67rem;
		height: 0.44rem;
		background: #fff;
		font-size: 0.16rem;
		border: 0;
	}
	#fa{
		width: 3.75rem;
		height: 0.66rem;
		display: flex;
		justify-content:space-around;
	}
	#fa i{
		width: 2rem;
		height: 0.66rem;
	}
	#fa p{
		width: 1rem;
		height: 0.66rem;
		font-size: 0.2rem;
		font-weight: 400;
		display: flex;
		align-items: center;
	}
	.xiang{
		width: 3.75rem;
		height: 1.36rem;
		display: flex;
		justify-content: space-around;
		flex-wrap: wrap;
	}
	.xian{
		width: 3.75rem;
		min-height: 0.7rem;
		display: flex;
		justify-content: flex-end;
		overflow: hidden;
		flex-wrap: wrap;
	}
	.xian p{
		width: 3.45rem;
		height: 0.3rem;
	}
	.xiang p{
		width: 1.03rem;
		height: 0.35rem;
		text-align: center;
		line-height: 0.35rem;
		background: #f5f5f5;

	}
	#li{
		width: 3.75rem;
		height: 0.66rem;
		display: flex;
		justify-content:space-between;
	}
	.shi{
		width: 1rem;
		height: 0.66rem;
		font-size: 0.22rem;
		text-align: center;
		line-height: 0.66rem;
	}
	#li p{
		width: 1.3rem;
		height: 0.66rem;
		font-size: 0.2rem;
		font-weight: 400;
		text-align: center;
		line-height: 0.66rem;
	}
	#ding{
		position: absolute;
		left: 0.4rem;
		top: 0.4rem;
	}
	#ding li{
	width: 3.25rem;
	height: 0.3rem;
	line-height: 0.3rem;
	border-bottom: 1px dashed rgb(218,218,218);
	}
</style>
